import React, {useEffect, useRef, useState} from 'react'
import {ECharts, init} from 'echarts';
import {options} from './config';


const Home = () => {
    const divRef = useRef<HTMLDivElement>(null);
    const chartRef = useRef<ECharts>();
    const [showDiv, setShowDiv] = useState(false)
    const [position, setPosition] = useState({})

    const eventShow = (e) => {
        setShowDiv(false)
    }
    useEffect(() => {
        const myChart = init(divRef.current);
        myChart.on('click', params => {
            setShowDiv(false)
            console.log('点击了x轴', params);
        });
        myChart.on('contextmenu', (params) => {
            console.log(params)
            params.event?.stop();
            setPosition({
                position: 'absolute',
                left: `${params.event?.offsetX}px`,
                top: `${params.event?.offsetY}px`
            })
            setShowDiv(true)

            //     var componentType = params.componentType;
            //
            //     // 根据图表元素类型生成自定义菜单项
            //     var menuItems = [];
            //     if (componentType === 'series') {
            //         menuItems.push({
            //             name: '数据视图',
            //             onclick: function () {
            //                 console.log('查看数据');
            //             },
            //         });
            //         menuItems.push({
            //             name: '编辑',
            //             onclick: function () {
            //                 console.log('编辑图表');
            //             },
            //         });
            //     } else if (componentType === 'dataZoom') {
            //         menuItems.push({
            //             name: '放大',
            //             onclick: function () {
            //                 myChart.dispatchAction({type: 'dataZoom', seriesIndex: params.dataIndex, startValue: 0, endValue: 100});
            //             },
            //         });
            //         menuItems.push({
            //             name: '缩小',
            //             onclick: function () {
            //                 myChart.dispatchAction({type: 'dataZoom', seriesIndex: params.dataIndex, startValue: 0, endValue: 100});
            //             },
            //         });
            //     }
            //     var menuContainer = document.createElement('ul');
            //     menuContainer.style.position = 'absolute';
            //     menuContainer.style.listStyle = 'none';
            //     menuContainer.style.padding = '10px';
            //     menuContainer.style.backgroundColor = '#fff';
            //     menuContainer.style.border = '1px solid #ccc';
            //     menuContainer.style.zIndex = 1000;
            //
            //     // 遍历菜单项并添加到容器中
            //     for (var i = 0; i < menuItems.length; i++) {
            //         var menuItem = document.createElement('li');
            //         menuItem.innerHTML = menuItems[i].name;
            //         menuItem.onclick = menuItems[i].onclick;
            //         menuContainer.appendChild(menuItem);
            //     }
            //
            //     // 将菜单容器添加到页面中
            //     document.body.appendChild(menuContainer);
            //
            //     // 计算菜单位置并设置到容器中
            //     const x = params?.event?.clientX || 0;
            //     const y = params?.event?.clientY || 0;
            //     menuContainer.style.left = x + 'px';
            //     menuContainer.style.top = y + 'px';
            // })
            // myChart.on('legendselectchanged', function (params:any) {
            //     // 获取点击图例的选中状态
            //     var isSelected = params.selected[params.name];
            //     // 在控制台中打印
            //     console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
            //     // 打印所有图例的状态
            //     console.log(params.selected);
            // });
            // chartRef.current.on('click', function (params) {
            //     // 检查点击是否在 x 轴上
            //     if (params.componentType === 'xAxis') {
            //         console.log('你点击了 x 轴，当前的值是：' + params.value);
            //         // 在这里添加你需要的操作
            //     }
            // });
        }, []);
        myChart.setOption(options, true);
        console.log(chartRef.current)
        window.addEventListener('click', eventShow)
        return () => {
            window.removeEventListener('click', eventShow)
        }
    })
    return <>
        <div ref={divRef} style={{width: '600px', height: '400px', position: 'relative'}}>
            {showDiv && <div style={{...position,border:'1px #C8C8C8 solid',width:'100px',backgroundColor:'#fff'}}>
                <div style={{height:'30px',borderBottom:'1px #C8C8C8 solid'}}>11</div>
                <div style={{height:'30px'}}>22</div>
            </div>}
        </div>

    </>
};

export default Home;